<template>
  <div class="add">
    <el-form ref="form" :rules="rules" :model="form" label-width="8rem">
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品名" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入商品名" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品类型" prop="categoryId">
            <el-select v-model="form.categoryId" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="item in options"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品标题" prop="productTitle">
            <el-input v-model="form.productTitle" placeholder="请输入商品标题"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品介绍" prop="productIntro">
            <el-input v-model="form.productIntro" type="textarea" placeholder="请输入商品介绍"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品原价" prop="productPrice">
            <el-input v-model="form.productPrice" type="number" placeholder="请输入商品原价"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品现价" prop="productSellingPrice">
            <el-input v-model="form.productSellingPrice" type="number" placeholder="请输入商品现价"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品总数" prop="productNum">
            <el-input v-model="form.productNum" type="number" placeholder="请输入商品总数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品封面">
            <el-image :src="byteToArray(form.productPicture)"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品图片">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="item in form.productList" :key="item">
                <el-image :src="byteToArray(item)" style="height: 100%"/>
              </el-carousel-item>
            </el-carousel>

          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="updateData()">确认</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import $ from "@/api/project";

  export default {
    data() {
      return {
        form: {
          productId: undefined,
          productName: "",
          categoryId: undefined,
          categoryName: "",
          productTitle: "",
          productIntro: "",
          productPicture: "",
          productPrice: undefined,
          productSellingPrice: undefined,
          productNum: undefined,
          productSales: undefined,
          productList: [],
        },
        rules: {
          productName: {
            required: true,
            message: "请填写",
          },
          categoryId: {
            required: true,
            message: "请选择",
          },
          categoryName: {
            required: true,
            message: "请填写",
          },
          productTitle: {
            required: true,
            message: "请填写",
          },
          productIntro: {
            required: true,
            message: "请填写",
          },
          productPrice: {
            required: true,
            message: "请填写",
          },
          productSellingPrice: {
            required: true,
            message: "请填写",
          },
          productNum: {
            required: true,
            message: "请填写",
          },
        },
        options: [],
      };
    },
    created() {
      this.getCategoryList()
      this.fetchData(this.$route.query.id)
    },
    methods: {
      byteToArray(path) {
        return "http://localhost:8090/product/imgInfo?path=" + path
      },
      async fetchData(id) {
        await $.findProductById({productId: id}).then(res => {
          if (res.data) {
            this.form = res.data
          }
        })
      },
      updateData() {
        $.updateProduct(this.form).then(res => {
          if (res.data) {
            this.$message({
              message: "保存成功",
              type: "success"
            })
          }
        })
      },
      handleSubmit() {
        if (this.uploadfile == "") {
          this.$message({
            message: "请先选择图片",
            type: 'error'
          })
          return
        }
        this.listLoading = true;
        let formData = new FormData()
        formData.append('file', this.uploadfile.raw);
        $.pictureUpload(formData).then(res => {
          if (res.success) {
            let reg = new RegExp('\\\\', "g")//g,表示全部替换。
            let path = res.data.replace(reg, "/");
            this.coverPath = path
            this.$message({
              message: "上传成功",
              type: 'success'
            })
          }
        })
      },

      async getCategoryList() {
        await $.findAllCategory().then(res => {
          this.options = res.data
        })
      },

      validate() {
        let error = "";
        if (this.form.productName == null) {
          error = "请填写商品名\n";
        } else if (this.form.categoryId == null) {
          error = "请选择类型\n";
        }

        if (error) {
          this.$message({
            message: error,
            type: "error"
          });
          return false;
        }
        return true;
      }
    }
  };
</script>
<style scoped>
  .add {
    padding: 1rem;
  }
</style>
